<template>
    <div>
        <!-- 标题栏 -->
        <van-nav-bar title="生成订单" left-arrow @click-left="onClickLeft" fixed>
            <template #right>
                <van-icon name="weapp-nav" size="18" />
            </template>
        </van-nav-bar>

        <main>
            <!-- 地址 -->
            <router-link to="/addressmanage">
                <div class="address-wrap">
                    <div class="name">
                        <span>{{ addressDetail.userName }}</span>
                        <span>{{ addressDetail.userPhone }}</span>
                    </div>
                    <van-icon name="arrow" />
                    <div class="address">
                        <span>{{ addressDetail.provinceName +
                            addressDetail.cityName +
                            addressDetail.regionName +
                            addressDetail.detailAddress
                            }}</span>
                    </div>
                </div>
            </router-link>
            
            
            <!-- 商品 -->
            <div class="goods-list">
                <van-card v-for="item in checkedGoodsList" :key="item.goodsId" :num="item.goodsCount" :price="item.sellingPrice"
                    :title="item.goodsName" :thumb="item.goodsCoverImg" />
            </div>
        </main>
        



        <!-- 提交订单栏 -->
        <van-submit-bar :price="totalPrice * 100" button-text="生成订单" @submit="onSubmit" />
        <van-popup v-model:show="showPopup" position="bottom" class="popup" round>
            <template #default>
                <div class="content">
                    <div class="payways">
                        <div class="payway" @click="goTOMyOrder(orderNo,1)">
                            <van-icon name="wechat" />
                            &nbsp;
                            <span>微信支付</span>
                        </div>
                        <div class="payway" @click="goTOMyOrder(orderNo,2)">
                            <van-icon name="alipay" />
                            &nbsp;
                            <span>支付宝支付</span>
                        </div>
                    </div>
                    <div class="cancel" @click="cancelPay">
                        <span>取消</span>
                    </div>
                </div>


            </template>
        </van-popup>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue"
import { useRoute, useRouter } from "vue-router";
import { getAddressDetail, getCheckedGoods, saveOrder, paySuccess } from '@/api/index.js'
import { useCartStore } from '@/store/useCartStore.js'
import { storeToRefs } from "pinia";
let route = useRoute();
let router = useRouter();
let store = useCartStore();

let id = route.query.addressId //拿到query传过来的地址id

let addressDetail = reactive({})
let checkedGoodsList = reactive([])

// 拿到要结算的商品的数据
let goodsList = [...store.checkedGoodsId];

let showPopup = ref(false);
let payWay = ref([{ name: '微信支付' }, { name: '支付宝支付' }]);
let orderNo = ref("");  //生成订单后的订单号

onMounted(() => {
    // 拿到query传过来的地址id的地址详细信息
    getAddressDetail(id).then(res => {
        let { resultCode, data } = res;
        if (resultCode == 200) {
            for (let key in data) {
                addressDetail[key] = data[key]
            }
        }
    })

    
    // console.log(goodsList.toString());
    getCheckedGoods(goodsList.toString()).then(res => {
        let { resultCode, data } = res;
        if (resultCode == 200) {
            checkedGoodsList.push(...data)
        }
    })


})


// 计算需要支付的总额
let totalPrice = computed(() => {
    return checkedGoodsList.reduce((prev, next) => {
        return prev + (next.sellingPrice * next.goodsCount)
    }, 0)
});


//点击生成订单按钮 
let onSubmit = () => {
    showPopup.value = true;
    saveOrder(id, goodsList).then(res => {
        if (res.resultCode == 200) {
            orderNo = ref(res.data)
        }
    })
}

// 点击支付跳转我的订单
let goTOMyOrder = (orderNo,payType) => {
    paySuccess(orderNo, payType).then(res => {
        
    })
    router.replace('/my-order')
 }

//  点击取消支付
let cancelPay = () => {
    showPopup = false;
    router.replace('/my-order')
}

// 点击顶部栏返回
let onClickLeft = () => {
    router.back()
}
</script>




<style scoped lang="less">
main{
    margin-top: 1rem;
.address-wrap {
        margin-bottom: 0.53333rem;
        background: #fff;
        position: relative;
        font-size: 0.37333rem;
        padding: 0.63rem 0.4rem 0.66667rem;
        color: #222333;

        .name {
            display: flex;
            justify-content: left;
            margin: 0.26667rem 0 0.27667rem;
            line-height: 0.37333rem;

            span:nth-child(1) {
                margin-right: 0.04rem;
            }
        }

        .address {
            display: flex;
            justify-content: left;
            line-height: 0.37333rem;
        }

        .van-icon {
            position: absolute;
            right: 0.26667rem;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            font-size: 0.53333rem;
        }
    }

    .address-wrap::before {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 0.05333rem;
        background: -webkit-repeating-linear-gradient(135deg,
                #ff6c6c,
                #ff6c6c 20%,
                transparent 0,
                transparent 25%,
                #1989fa 0,
                #1989fa 45%,
                transparent 0,
                transparent 50%);
        background: repeating-linear-gradient(-45deg,
                #ff6c6c,
                #ff6c6c 20%,
                transparent 0,
                transparent 25%,
                #1989fa 0,
                #1989fa 45%,
                transparent 0,
                transparent 50%);
        background-size: 2.13333rem;
        content: "";
    }

    .goods-list {
        padding-bottom: 1rem;
    }
}


.popup {
    .content {
        background: #F7F8FA;

        .payways {
            margin-bottom: .2rem;

            .payway {
                height: 2rem;
                width: 100%;
                text-align: center;
                line-height: 2rem;
                font-size: .5rem;
                background: white;
            }
                        .payway:active{
                            background-color: #ccc;
                        }
        }

        .cancel {
            height: 1.5rem;
            line-height: 1.5rem;
            width: 100%;
            text-align: center;
            font-size: .4rem;
            background: white;
        }
                .cancel:active{
                    background-color: #ccc;
                }
    }


}
</style>